<template>
  <div class="file-editor"> 
    <input type="file" id="fileInput" accept=".docx" @change="uploadChange">
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div class="file-main">
      <!-- 文件内容 -->
      <div class="file-preview">
          <div id="preview" v-html="vHtml"></div>
          <!-- 选中文字后显示的"去评论"按钮 -->
          <div 
            v-if="showCommentButton" 
            class="comment-trigger-button"
            :style="{ left: commentButtonPosition.left + 'px', top: commentButtonPosition.top + 'px' }"
            @click.stop="goToComment"
          >
            去评论
          </div>
          <div v-if="isLoading" class="loading">正在解析文件...</div>
      </div>
      <!-- 批注列表 -->
      <div class="comment-list">
        <div class="comment-list-title">批注列表</div>
        
        <!-- 点击"去评论"按钮后显示的评论输入框 -->
        <div v-if="showCommentInputInList" class="comment-input-container">
          <div class="selected-text-preview">{{ selectedText }}</div>
          <textarea 
            v-model="commentInput" 
            placeholder="添加评论..." 
            class="comment-input"
            rows="3"
          ></textarea>
          <div class="comment-actions">
            <button @click="addComment" class="add-comment-btn">添加评论</button>
            <button @click="cancelComment" class="cancel-btn">取消</button>
          </div>
        </div>
        
        <div class="comment-items-container">
          <!-- 临时内容，后续可根据comments数组动态渲染 -->
          <div v-if="comments.length === 0" class="no-comments">
            暂无批注
          </div>
          
          <!-- 动态渲染评论列表 -->
          <div v-for="comment in comments" :key="comment.id" class="comment-item" :class="{ 'resolved': comment.resolved }" :style="comment.position ? { position: 'absolute', top: comment.position.top + 'px' } : {}" @click="scrollToCommentContent(comment.id, $event)">
          <!-- 选中的文本 -->
          <div class="selected-text-highlight">{{ comment.selectedText }}</div>
          <!-- 评论内容 -->
          <div class="comment-content">{{ comment.content }}</div>
          <!-- 评论元信息 -->
          <div class="comment-meta">
            <span>{{ comment.author }}</span>
            <span>{{ comment.timestamp }}</span>
          </div>
          <!-- 评论操作按钮 -->
          <div class="comment-item-actions">
            <button @click="toggleCommentResolved(comment.id)" class="resolve-btn">
              {{ comment.resolved ? '未解决' : '已解决' }}
            </button>
            <button @click="deleteComment(comment.id)" class="delete-btn">删除</button>
          </div>
        </div>
      </div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import mammoth from 'mammoth'
import { ref } from 'vue';

/**
 * v-html - 用于预览解析后的HTML内容
 */
const vHtml = ref<string>('')

/**
 * 错误信息
 */
const errorMessage = ref<string>('')

/**
 * 加载状态
 */
const isLoading = ref<boolean>(false)

/**
 * 文件上传处理函数
 */
async function uploadChange(){
  // 重置状态
  errorMessage.value = ''
  vHtml.value = ''
  
  // 读取上传后的文件
  const fileInput = document.getElementById('fileInput') as HTMLInputElement
  const file = fileInput.files?.[0] ?? null;
  
  if (!file) {
    errorMessage.value = '请选择一个文件'
    return
  }
  
  // 验证文件类型
  if (!file.name.toLowerCase().endsWith('.docx')) {
    errorMessage.value = '请选择.docx格式的文件'
    return
  }
  
  try {
    isLoading.value = true
    
    // 读取文件内容
    const arrayBuffer = await readFileAsArrayBuffer(file)
    
    // 调用mammoth的convertToHtml函数解析文件
    // 完整配置styleMap以最大程度保留Word文档的原始格式
    const options = {
      // styleMap定义如何将Word样式映射到HTML，实现更精确的格式保留
      styleMap: [
        // 标题样式映射 - 中文环境的标题样式
        "p[style-name='标题 1'] => h1:fresh",
        "p[style-name='标题 2'] => h2:fresh",
        "p[style-name='标题 3'] => h3:fresh",
        
        // 标题样式映射 - 英文环境的标题样式
        "p[style-name='Heading 1'] => h1:fresh",
        "p[style-name='Heading 2'] => h2:fresh",
        "p[style-name='Heading 3'] => h3:fresh",
        
        // 正文段落样式映射
        "p[style-name='正文'] => p.normal:separator",
        "p[style-name='Normal'] => p.normal:separator",
        "p[style-name='Paragraph'] => p.normal:separator",
        
        // 确保空段落也被保留并应用适当的样式
        "p[style-name='正文'][is-empty] => p.blank-paragraph:separator",
        "p[style-name='Normal'][is-empty] => p.blank-paragraph:separator",
        "p[style-name='Paragraph'][is-empty] => p.blank-paragraph:separator",
        
        // 列表样式映射
        "ul => ul",
        "ol => ol",
        "li => li",
        
        // 强调文本样式映射
        "b => strong",
        "i => em",
        "u => span.underline",
        "strike => span.strikethrough",
        
        // 表格样式映射
        "table => table.table:fresh",
        "tr => tr",
        "th => th",
        "td => td",
        
        // 引用样式映射
        "p[style-name='Quote'] => blockquote",
        "p[style-name='引用'] => blockquote",
        
        // 链接样式映射
        "a => a"
      ],
      
      // 配置文档处理选项以精确保留原始格式
      preserveEmptyParagraphs: true,
      
      // 设置忽略空段落为false，确保所有空行都被保留
      ignoreEmptyParagraphs: false
    };
    
    let result;
    
    try {
      result = await mammoth.convertToHtml({ arrayBuffer }, options)
      // 在预览HTML外层添加一个容器，并设置white-space: pre-wrap样式来保留空白符和换行
      vHtml.value = `<div style="white-space: pre-wrap;">${result.value}</div>`
    } catch (innerError) {
      console.error('Mammoth转换错误:', innerError);
      // 如果高级配置失败，使用简单配置作为后备
      result = await mammoth.convertToHtml({ arrayBuffer })
      vHtml.value = `<div style="white-space: pre-wrap;">${result.value}</div>`
    }
    
    // 如果有警告，可以在这里处理
    if (result.messages && result.messages.length > 0) {
      console.warn('解析警告:', result.messages)
    }
    
  } catch (error) {
    // 处理各种可能的错误
    if (error instanceof Error) {
      if (error.message.includes('Can\'t find end of central directory')) {
        errorMessage.value = '文件格式错误或文件已损坏，请尝试其他.docx文件'
      } else {
        errorMessage.value = `解析文件时出错: ${error.message}`
      }
    } else {
      errorMessage.value = '解析文件时发生未知错误'
    }
    console.error('文件解析错误:', error)
  } finally {
    isLoading.value = false
  }
}

/**
 * 读取文件为ArrayBuffer的工具函数
 * @param file 要读取的文件
 * @returns Promise<ArrayBuffer>
 */
function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    
    reader.onload = (event) => {
      if (event.target?.result instanceof ArrayBuffer) {
        resolve(event.target.result)
      } else {
        reject(new Error('无法读取文件内容'))
      }
    }
    
    reader.onerror = () => reject(new Error('文件读取失败'))
    reader.onabort = () => reject(new Error('文件读取被中断'))
    
    // 开始读取文件
    reader.readAsArrayBuffer(file)
  })
}

// 批注数据结构
interface Comment {
  id: number
  content: string
  author: string
  timestamp: string
  selectedText: string
  resolved: boolean
  position?: {
    top: number
    left?: number
    width?: number
  }
}

// 批注列表
const comments = ref<Comment[]>([])

// 当前选中的文本
const selectedText = ref('')

// 评论输入内容
const commentInput = ref('')

// 是否显示评论按钮
const showCommentButton = ref(false)

// 评论按钮位置
const commentButtonPosition = ref({ left: 0, top: 0 })

// 是否在右侧评论列表显示评论输入框
const showCommentInputInList = ref(false)

// 是否正在添加评论
const isAddingComment = ref(false)

// 存储当前选中内容的位置信息
const selectionPosition = ref<{ top: number; left?: number; width?: number } | null>(null)

// 存储当前选中的HTML元素，用于添加和移除背景色
const highlightedElement = ref<HTMLElement | null>(null)

// 为文档添加选中监听，实现选中文本后显示"去评论"按钮
function setupTextSelection() {
  // 清除之前的高亮
  function clearHighlight() {
    if (highlightedElement.value) {
      const parent = highlightedElement.value.parentNode
      if (parent) {
        while (highlightedElement.value.firstChild) {
          parent.insertBefore(highlightedElement.value.firstChild, highlightedElement.value)
        }
        parent.removeChild(highlightedElement.value)
        highlightedElement.value = null
      }
    }
  }
  const previewElement = document.getElementById('preview')
  if (!previewElement) return
  
  previewElement.addEventListener('mouseup', () => {
    const selection = window.getSelection()
    if (selection && selection.toString().trim()) {
      selectedText.value = selection.toString().trim()
      showCommentButton.value = true
      
      // 获取选中文本的位置，显示评论按钮
      const range = selection.getRangeAt(0)
      const rect = range.getBoundingClientRect()
      
      const previewRect = previewElement.getBoundingClientRect()
      
      // 保存选中文本的位置信息（相对于预览区域顶部的距离）
      const topPosition = rect.top - previewRect.top
      const leftPosition = rect.left - previewRect.left
      const width = rect.width
      
      selectionPosition.value = {
        top: topPosition,
        left: leftPosition,
        width: width
      }
      
      commentButtonPosition.value = {
        left: leftPosition + width / 2 - 30,
        top: topPosition - 40
      }
      
      // 为当前选中文本添加临时高亮效果
      try {
        // 先清除之前的高亮
        clearHighlight();
        
        // 创建一个临时的元素来包围选中的文本，以便应用样式
        const span = document.createElement('span');
        // 直接设置内联样式，淡黄色背景
        span.style.backgroundColor = '#fff9c4';
        span.style.padding = '1px 0'; // 稍微增加一些内边距以增强视觉效果
        span.style.borderRadius = '2px';
        
        // 将选中的内容包围在span中
        range.surroundContents(span);
        
        // 清除选择范围，防止后续操作出错
        selection.removeAllRanges();
        
        // 保存对span元素的引用，以便后续操作
        highlightedElement.value = span;
      } catch (e) {
        console.warn('无法设置选中文本背景色:', e);
      }
    } else {
      showCommentButton.value = false
      selectionPosition.value = null
      // 没有选中任何文本时，清除临时高亮
      clearHighlight();
    }
  })
  
  // 点击页面其他地方隐藏评论按钮和输入框
document.addEventListener('click', (e) => {
    const commentButton = document.querySelector('.comment-trigger-button')
    const commentInputContainer = document.querySelector('.comment-input-container')
    const commentList = document.querySelector('.comment-list')
    
    // 检查点击是否在预览区域、评论按钮、评论输入容器或评论列表内部
    if (!previewElement.contains(e.target as Node) && 
        !commentButton?.contains(e.target as Node) && 
        !commentInputContainer?.contains(e.target as Node) &&
        !commentList?.contains(e.target as Node)) {
      showCommentButton.value = false
      showCommentInputInList.value = false
      isAddingComment.value = false
      
      // 清除临时高亮
      clearHighlight()
    }
  })
}

// 点击"去评论"按钮，在右侧列表显示评论输入框
function goToComment() {
  showCommentButton.value = false
  showCommentInputInList.value = true
  isAddingComment.value = true
  
  // 自动滚动到评论输入框位置
  setTimeout(() => {
    const commentList = document.querySelector('.comment-list')
    const commentInputContainer = document.querySelector('.comment-input-container')
    
    if (commentList && commentInputContainer && selectionPosition.value) {
      // 设置评论输入框的位置，使其与评论内容的高度一致
      commentInputContainer.style.position = 'absolute'
      commentInputContainer.style.top = selectionPosition.value.top + 'px'
      commentInputContainer.style.width = '100%'
      commentInputContainer.style.boxSizing = 'border-box'
      
      // 确保评论输入框可见
      commentList.scrollTop = selectionPosition.value.top - 50
    } else {
      // 如果没有位置信息，恢复默认样式
      if (commentInputContainer) {
        commentInputContainer.style.position = 'static'
        commentInputContainer.style.top = 'auto'
        commentInputContainer.style.width = '100%'
      }
      if (commentList) {
        commentList.scrollTop = 0
      }
    }
  }, 100)
}

// 添加新评论
function addComment() {
  if (!commentInput.value.trim() || !selectedText.value) return
  
  const newComment: Comment = {
    id: Date.now(),
    content: commentInput.value.trim(),
    author: '当前用户',
    timestamp: new Date().toLocaleString('zh-CN'),
    selectedText: selectedText.value,
    resolved: false,
    position: selectionPosition.value || undefined,
    replies: []
  }
  
  comments.value.push(newComment)
  
  // 将临时高亮转换为永久下划线
  if (highlightedElement.value) {
    // 移除背景色，添加黄色下划线
    highlightedElement.value.style.backgroundColor = 'transparent';
    highlightedElement.value.style.textDecoration = 'underline';
    highlightedElement.value.style.textDecorationColor = '#ffeb3b';
    highlightedElement.value.style.textDecorationLine = 'underline';
    highlightedElement.value.style.textDecorationStyle = 'solid';
    highlightedElement.value.style.textDecorationThickness = '2px';
    
    // 存储评论ID，用于后续删除或解决评论时移除下划线
    highlightedElement.value.dataset.commentId = newComment.id.toString();
    
    // 不再需要这个引用
    highlightedElement.value = null;
  }
  
  // 清空输入和选中状态
  commentInput.value = ''
  selectedText.value = ''
  showCommentInputInList.value = false
  isAddingComment.value = false
}



// 点击评论项时滚动到文档中对应的内容
function scrollToCommentContent(commentId: number, event?: MouseEvent) {
  console.log(commentId)
  // 如果点击的是按钮元素，不执行滚动
  if (event && (event.target as HTMLElement).closest('button')) {
    return
  }
  
  // 根据评论ID找到文档中对应的高亮元素
  const elements = document.querySelectorAll(`[data-comment-id="${commentId}"]`)
  if (elements.length > 0) {
    const element = elements[0] as HTMLElement
    // 滚动到该元素，设置behavior为smooth实现平滑滚动，block为center使其居中显示
    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
    
    // 可以添加一个临时高亮效果，增强用户体验
    element.style.backgroundColor = '#fff9c4'
    setTimeout(() => {
      element.style.backgroundColor = 'transparent'
    }, 2000)
  }
}

// 切换评论解决状态
function toggleCommentResolved(commentId: number) {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.resolved = !comment.resolved
    
    // 根据评论解决状态更新下划线显示
    const elements = document.querySelectorAll(`[data-comment-id="${commentId}"]`)
    elements.forEach(el => {
      const element = el as HTMLElement
      if (comment.resolved) {
        // 评论已解决，隐藏下划线
        element.style.textDecoration = 'none'
        element.style.opacity = '0.7'
      } else {
        // 评论未解决，显示黄色下划线
        element.style.textDecoration = 'underline'
        element.style.textDecorationColor = '#ffeb3b'
        element.style.textDecorationLine = 'underline'
        element.style.textDecorationStyle = 'solid'
        element.style.textDecorationThickness = '2px'
        element.style.opacity = '1'
      }
    })
  }
}

// 删除评论
function deleteComment(commentId: number) {
  comments.value = comments.value.filter(c => c.id !== commentId)
  
  // 移除对应的下划线和span标签
  const elements = document.querySelectorAll(`[data-comment-id="${commentId}"]`)
  elements.forEach(el => {
    const element = el as HTMLElement
    const parent = element.parentNode
    if (parent) {
      // 保留原始文本内容，移除span标签
      while (element.firstChild) {
        parent.insertBefore(element.firstChild, element)
      }
      parent.removeChild(element)
    }
  })
}

// 取消评论
function cancelComment() {
  showCommentInputInList.value = false
  isAddingComment.value = false
  
  // 移除临时高亮，恢复原始文本
  if (highlightedElement.value) {
    const parent = highlightedElement.value.parentNode
    if (parent) {
      // 保留原始文本内容，移除span标签
      while (highlightedElement.value.firstChild) {
        parent.insertBefore(highlightedElement.value.firstChild, highlightedElement.value)
      }
      parent.removeChild(highlightedElement.value)
      highlightedElement.value = null
    }
  }
}

// 确保在DOM加载完成后初始化文本选择功能
import { onMounted } from 'vue'
onMounted(() => {
  setupTextSelection()
})


    
</script>

<style scoped lang="less">
// 主容器样式
.file-editor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-height: 100vh;
  box-sizing: border-box;
}

// 文件上传按钮样式
#fileInput {
  display: block;
  margin-bottom: 15px;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #333;
}

#fileInput:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// 错误信息样式
.error-message {
  padding: 12px 15px;
  margin-bottom: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

// 主内容区域 - 左右分栏布局
.file-main {
  display: flex;
  gap: 20px;
  min-height: 600px;
}

// 文件预览区域
.file-preview {
  flex: 1;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}

// 预览内容样式
#preview {
  padding: 25px;
  min-height: 600px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  background-color: #fff;
  text-align: left;
  line-height: 1.6;
}

// 预览区域内的文本样式
#preview {
  h1, h2, h3 {
    color: #333;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 600;
  }
  
  h1 {
    font-size: 28px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
  }
  
  h2 {
    font-size: 24px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
  }
  
  h3 {
    font-size: 20px;
  }
  
  p {
    color: #333;
    margin-bottom: 15px;
    line-height: 1.8;
  }

  // 正文段落样式
  .normal {
    color: #333;
    margin-bottom: 15px;
    line-height: 1.8;
    text-align: justify;
  }

  // 空白段落样式
  .blank-paragraph {
    min-height: 1em;
    margin-bottom: 15px;
  }

  // 下划线文本样式
  .underline {
    text-decoration: underline;
  }

  // 删除线文本样式
  .strikethrough {
    text-decoration: line-through;
  }

  // 表格样式
  .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .table th {
    background-color: #f5f5f5;
    font-weight: bold;
  }

  .table tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  // 引用样式
  blockquote {
    margin: 15px 0;
    padding: 10px 20px;
    border-left: 4px solid #ddd;
    background-color: #f9f9f9;
    font-style: italic;
    color: #666;
  }
  
  ul, ol {
    margin-left: 25px;
    margin-bottom: 15px;
  }
  
  li {
    margin-bottom: 5px;
    color: #444;
  }
  
  strong {
    font-weight: 600;
    color: #222;
  }
  
  em {
    font-style: italic;
  }
  
  a {
    color: #1890ff;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  a:hover {
    color: #40a9ff;
    text-decoration: underline;
  }
}

// 加载状态样式
.loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
  font-style: italic;
  font-size: 14px;
  z-index: 10;
}

// 选中文字后显示的"去评论"按钮
.comment-trigger-button {
  position: absolute;
  background-color: #499ef8;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.comment-trigger-button:hover {
  background-color: #3992f3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.comment-trigger-button::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #499ef8;
}

.comment-trigger-button:hover::after {
  border-top-color: #3992f3;
}

// 评论输入框容器
.comment-input-container {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  animation: slideUp 0.3s ease-out;
  width: calc(100% - 30px);
  box-sizing: border-box;
  z-index: 10;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 选中文字预览
.selected-text-preview {
  background-color: #f0f5ff;
  border: 1px solid #d6e4ff;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #444;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 评论输入框
.comment-input,
.reply-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.comment-input:focus,
.reply-input:focus {
  outline: none;
  border-color: #499ef8;
}

// 评论操作按钮
.comment-actions,
.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.add-comment-btn,
.add-reply-btn,
.cancel-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-comment-btn,
.add-reply-btn {
  background-color: #499ef8;
  color: white;
}

.add-comment-btn:hover,
.add-reply-btn:hover {
  background-color: #3992f3;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e6e6e6;
}

// 评论项操作按钮
.comment-item-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.reply-btn,
.resolve-btn,
.delete-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;
}

.reply-btn {
  color: #499ef8;
}

.reply-btn:hover {
  background-color: #f0f5ff;
}

.resolve-btn {
  color: #28a745;
}

.resolve-btn:hover {
  background-color: #f0fff4;
}

.delete-btn {
  color: #dc3545;
}

.delete-btn:hover {
  background-color: #fff0f0;
}

// 回复输入框容器
.reply-input-container {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e0e0e0;
}

// 回复列表容器
.replies-container {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

// 回复项样式
.reply-item {
  padding: 10px;
  margin-top: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-size: 13px;
}

.reply-content {
  color: #444;
  margin-bottom: 6px;
  line-height: 1.5;
}

.reply-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

// 已解决的评论样式
.comment-item.resolved {
  opacity: 0.7;
}

.comment-item.resolved .selected-text-highlight {
  text-decoration: line-through underline solid;
  text-decoration-color: #ffeb3b;
}

// 批注列表区域
.comment-list {
  width: 300px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 15px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}

// 评论项容器
.comment-items-container {
  position: relative;
  min-height: 100%;
}

// 临时高亮样式（选中文本时的淡黄色背景）
.temporary-highlight {
  background-color: #fff9c4;
  padding: 1px 0;
  border-radius: 2px;
}

// 选中文字高亮（评论列表中的显示样式）
.selected-text-highlight {
  background-color: #f0f5ff;
  border: 1px solid #d6e4ff;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
  // 添加黄色下划线
  text-decoration: underline solid #ffeb3b;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 批注项样式
.comment-item {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
}

.comment-item:hover {
  border-color: #d9d9d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
  word-wrap: break-word;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

// 批注列表标题
.comment-list-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

// 无批注提示样式
.no-comments {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

// 滚动条样式美化
#preview::-webkit-scrollbar,
.comment-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#preview::-webkit-scrollbar-track,
.comment-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#preview::-webkit-scrollbar-thumb,
.comment-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#preview::-webkit-scrollbar-thumb:hover,
.comment-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}



</style>